<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./vue.js"></script>
        <title>Document</title>
        <style>
            * {
                list-style: none;
            }
            #app {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 500px;
                height: 500px;
                margin: 0 auto;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 
        1.有待办事项展示待办事项，没有则显示空空如也
        2.输入内容后，下次输入前应该清除上次的
        3.删除功能
        4.加分项 样式写好看点
       -->
            <div class="header">
                <input type="text" v-model="myToDo" />
                <button @click="add">添加</button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    {{item}}
                    <button @click="del(index)">删除</button>
                </li>
            </ul>
            <div v-show="!list.length">空空如也～</div>
        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    myToDo: "",
                    list: [],
                },
                methods: {
                    //添加待办事项
                    add() {
                        this.list.push(this.myToDo);
                        this.myToDo = "";
                    },
                    //删除待办事项
                    del(el) {
                        this.list.splice(el, 1);
                    },
                },
            });
        </script>
    </body>
</html>
